<%--
    Date: 2024-05-22
    学生选择科目并输入成绩修改申请。查看申请的审核状态。
    studentGradeRequest.jsp
    ├── 提交成功 --> studentHome.jsp
    └── 返回 --> studentHome.jsp
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <title>学生成绩修改申请</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/studentGradeRequest.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/updateTime.js"></script>
    <style>
        body {
            background: url('${pageContext.request.contextPath}/resources/img/bg-HYL.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }

        .top-bar {
            background-color: #112d4e;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            z-index: 3;
            top: 0;
        }

        .main-content {
            margin-top: 60px;
        }

        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
            opacity: 0.9;
            /* 设置表格不透明度 */
        }

        th,
        td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #dbe2ef;
            color: #112d4e;
        }

        td {
            background-color: #f9f7f7;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .btn-primary {
            background-color: #3f72af;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
        }

        .btn-primary:hover {
            opacity: 0.8;
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
        }

        .btn-secondary:hover {
            opacity: 0.8;
        }
    </style>
</head>

<body>
<div class="overlay"></div>
<div class="top-bar">
    <span id="currentTime"></span>
</div>
<div class="container main-content">
    <h1 class="text-center mt-4 mb-4">成绩修改申请</h1>
    <form action="<c:url value='/gradeRequest/add'/>" method="post" class="form">
        <input type="hidden" name="studentId" value="${student.userId}">
        <div class="form-group">
            <label for="subjectId">选择科目:</label>
            <select id="subjectId" name="subjectId" class="form-control">
                <c:forEach items="${subjects}" var="subject">
                    <option value="${subject.subjectId}">${subject.subjectName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group">
            <label for="requestedGrade">请求成绩:</label>
            <input type="number" id="requestedGrade" name="requestedGrade" required step="0.5" class="form-control">
        </div>
        <div class="form-group">
            <label for="reason">修改理由:</label>
            <textarea id="reason" name="reason" required class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交申请</button>
    </form>

    <h2 class="text-center mt-4 mb-4">我的申请记录</h2>
    <c:if test="${empty gradeRequests}">
        <p>目前没有任何申请记录。</p>
    </c:if>
    <table class="table table-striped table-bordered table-custom">
        <thead>
        <tr>
            <th>科目代码</th>
            <th>请求成绩</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${gradeRequests}" var="request">
            <tr>
                <td>${request.subjectId}</td>
                <td>${request.requestedGrade}</td>
                <td>${request.status}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="text-center mt-3">
        <a href="<c:url value='/student/'/>" class="btn btn-secondary">返回学生主页</a>
    </div>
</div>
</body>

</html>
